@use "sass:map";
@forward "var";
@use "./var.scss" as *;

// 前缀
$namespace: "z" !default;
// 块、子级
$connect: "-" !default;
// 元素
$element-connect: "__" !default;
// 修改器
$modifier-connect: "--" !default;
// 修改器的值
$modifier-value-connect: "_" !default;
// 状态
$state-prefix: "is-" !default;

// 生成root的变量名方法
@function createVarName($list) {
  $name: "--" + $namespace;
  @each $item in $list {
    @if $item != "" {
      $name: $name + "-" + $item;
    }
  }
  @return $name;
}

// 获取root的变量名方法
@function getVarName($args...) {
  @return createVarName($args);
}

// 生成主题色变量
@mixin set-main-color() {
  @each $type in $types {
    $color: map.get($theme-colors, $type, "base");
    #{createVarName(('color', $type))}: #{$color};
  }
}

// 生成层次色变量
@mixin set-mainLight-color() {
  @each $type in $types {
    @for $i from 1 through 9 {
      $color: map.get($theme-colors, $type, "light-" + $i);
      #{createVarName(('color', $type, 'light', $i))}: #{$color};
    }
  }
}

// 生成全局变量
@mixin set-global-var() {
  @each $keyName, $keyList in $global {
    // 判断是否存在
    @if $keyList {
      @each $type, $value in $keyList {
        #{createVarName(($keyName, $type))}: #{$value};
      }
    }
  }
}

// 设置组件的变量
@mixin set-component-var($componentName, $componentVar, $varKey: "default") {
  @each $key, $value in $componentVar {
    $varName: getVarName($componentName, $key);
    $varValue: map.get($componentVar, $key, $varKey);
    @if ($varValue) {
      #{$varName}: var(#{$varValue});
    }
  }
}
